<template>
<div>
  <el-row :gutter="20">
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
  </el-row>

  <el-row :gutter="20">
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
  </el-row>

  <el-row :gutter="20">
    <el-button circle>1</el-button>
    <el-button type="primary" circle>2</el-button>
    <el-button type="success" circle>3</el-button>
    <el-button type="info" circle>4</el-button>
    <el-button type="warning" circle>5</el-button>
    <el-button type="danger" circle>6</el-button>
  </el-row>
  <el-row :gutter="20">
    <el-button disabled>禁用按钮</el-button>
    <el-button type="primary" disabled>主要按钮</el-button>
    <el-button type="success" disabled>成功按钮</el-button>
    <el-button type="info" disabled>信息按钮</el-button>
    <el-button type="warning" disabled>警告按钮</el-button>
    <el-button type="danger" disabled>危险按钮</el-button>
  </el-row>
  <h1>{{a}}</h1>
</div>
</template>

<script>
    export default {
        name: "button1",
      data(){
          return {
            a:this.$route.query.a
          }
      },
      watch:{
          "$route":function(to,from){
              this.a=to.query.a;
          }
      }
    }
</script>

<style scoped>
  .el-row{
    margin:20px;
  }
</style>
